<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>面试官：说说你对keep-alive的理解是什么？ | vivace-itnerview</title>
    <meta name="description" content="interview docs">
    <link rel="stylesheet" href="/assets/style.f9ffe3f5.css">
    <link rel="modulepreload" href="/assets/chunks/VPAlgoliaSearchBox.ea0e7bf0.js">
    <link rel="modulepreload" href="/assets/app.1cdb2ec5.js">
    <link rel="modulepreload" href="/assets/vue_keepalive.md.b8401dc5.lean.js">
    
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
  <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-ca9ccb7e><!--[--><!--]--><!--[--><span tabindex="-1" data-v-151f2593></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-151f2593> Skip to content </a><!--]--><!----><header class="VPNav" data-v-ca9ccb7e data-v-a71a30f1><div class="VPNavBar has-sidebar" data-v-a71a30f1 data-v-a35e6f52><div class="container" data-v-a35e6f52><div class="VPNavBarTitle has-sidebar" data-v-a35e6f52 data-v-d5925166><a class="title" href="/" data-v-d5925166><!--[--><!--]--><!--[--><img class="VPImage logo" src="/logo.png" data-v-e13a1912><!--]--><!--[-->Web Interview<!--]--><!--[--><!--]--></a></div><div class="content" data-v-a35e6f52><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a35e6f52 style="--38a1667b:&#39;Meta&#39;;"><div id="docsearch"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a35e6f52 data-v-f83db6ba><span id="main-nav-aria-label" class="visually-hidden" data-v-f83db6ba>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/css/box.html" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->CSS<!--]--><!----></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-f83db6ba data-v-6ffb57d3><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-6ffb57d3><span class="text" data-v-6ffb57d3><!----> JavaScript <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-6ffb57d3><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-6ffb57d3><div class="VPMenu" data-v-6ffb57d3 data-v-1c5d0cfc><div class="items" data-v-1c5d0cfc><!--[--><!--[--><div class="VPMenuLink" data-v-1c5d0cfc data-v-e8e0fb1d><a class="VPLink link" href="/JavaScript/data_type.html" data-v-e8e0fb1d data-v-3c355974><!--[-->JavaScript<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-1c5d0cfc data-v-e8e0fb1d><a class="VPLink link" href="/es6/var_let_const.html" data-v-e8e0fb1d data-v-3c355974><!--[-->es6<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-1c5d0cfc data-v-e8e0fb1d><a class="VPLink link" href="/typescript/typescript_javascript.html" data-v-e8e0fb1d data-v-3c355974><!--[-->Typescript<!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-f83db6ba data-v-6ffb57d3><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-6ffb57d3><span class="text" data-v-6ffb57d3><!----> 框架 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-6ffb57d3><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-6ffb57d3><div class="VPMenu" data-v-6ffb57d3 data-v-1c5d0cfc><div class="items" data-v-1c5d0cfc><!--[--><!--[--><div class="VPMenuLink" data-v-1c5d0cfc data-v-e8e0fb1d><a class="VPLink link" href="/vue/vue.html" data-v-e8e0fb1d data-v-3c355974><!--[-->Vue<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-1c5d0cfc data-v-e8e0fb1d><a class="VPLink link" href="/vue3/goal.html" data-v-e8e0fb1d data-v-3c355974><!--[-->Vue3<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-1c5d0cfc data-v-e8e0fb1d><a class="VPLink link" href="/React/React.html" data-v-e8e0fb1d data-v-3c355974><!--[-->React<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-1c5d0cfc data-v-e8e0fb1d><a class="VPLink link" href="/webpack/webpack.html" data-v-e8e0fb1d data-v-3c355974><!--[-->webpack<!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/NodeJS/nodejs.html" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->node<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/algorithm/Algorithm.html" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->Algorithm<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/applet/applet.html" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->小程序<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/http/HTTP_HTTPS.html" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->http<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/git/version_control.html" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->Git<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a35e6f52 data-v-a3e7452b><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-a3e7452b data-v-968780f1 data-v-086e8519><span class="check" data-v-086e8519><span class="icon" data-v-086e8519><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-968780f1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-968780f1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a35e6f52 data-v-738bef5a data-v-f6988cfb><!--[--><a class="VPSocialLink" href="https://github.com/xiumubai" target="_blank" rel="noopener" data-v-f6988cfb data-v-e57698f6><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a35e6f52 data-v-e89b88d7 data-v-6ffb57d3><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-6ffb57d3><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-6ffb57d3><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-6ffb57d3><div class="VPMenu" data-v-6ffb57d3 data-v-1c5d0cfc><!----><!--[--><!--[--><!----><div class="group" data-v-e89b88d7><div class="item appearance" data-v-e89b88d7><p class="label" data-v-e89b88d7>Appearance</p><div class="appearance-action" data-v-e89b88d7><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-e89b88d7 data-v-968780f1 data-v-086e8519><span class="check" data-v-086e8519><span class="icon" data-v-086e8519><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-968780f1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-968780f1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-e89b88d7><div class="item social-links" data-v-e89b88d7><div class="VPSocialLinks social-links-list" data-v-e89b88d7 data-v-f6988cfb><!--[--><a class="VPSocialLink" href="https://github.com/xiumubai" target="_blank" rel="noopener" data-v-f6988cfb data-v-e57698f6><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a35e6f52 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-ca9ccb7e data-v-aac27d5e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-aac27d5e><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-aac27d5e><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-aac27d5e>Menu</span></button><a class="top-link" href="#" data-v-aac27d5e> Return to top </a></div><aside class="VPSidebar" data-v-ca9ccb7e data-v-f332cb62><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-f332cb62><span class="visually-hidden" id="sidebar-aria-label" data-v-f332cb62> Sidebar Navigation </span><!--[--><div class="group" data-v-f332cb62><section class="VPSidebarGroup collapsible" data-v-f332cb62 data-v-2976c796><div class="title" role="button" data-v-2976c796><h2 class="title-text" data-v-2976c796>Vue2 系列</h2><div class="action" data-v-2976c796><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-2976c796><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-2976c796><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-2976c796><!--[--><a class="VPLink link link" href="/vue/vue.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>1.说说你对vue的理解?</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/spa.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>2.说说你对SPA（单页应用）的理解?</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/show_if.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>3.Vue中的v-show和v-if怎么理解？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/new_vue.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>4.Vue实例挂载的过程中发生了什么?</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/lifecycle.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>5.说说你对Vue生命周期的理解?</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/if_for.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>6.为什么Vue中的v-if和v-for不建议一起用?</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/first_page_time.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>7.SPA（单页应用）首屏加载速度慢怎么解决？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/data.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>8.为什么data属性是一个函数而不是一个对象？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/data_object_add_attrs.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>9.Vue中给对象添加新属性界面不刷新?</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/components_plugin.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>10.Vue中组件和插件有什么区别？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/communication.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>11.Vue组件间通信方式都有哪些?</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/bind.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>12.说说你对双向绑定的理解?</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/nexttick.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>13.说说你对nexttick的理解?</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/mixin.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>14.说说你对vue的mixin的理解，有什么应用场景？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/slot.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>15.说说你对slot的理解？slot使用场景有哪些？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/observable.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>16.Vue.observable你有了解过吗？说说看</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/key.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>17.你知道vue中key的原理吗？说说你对它的理解？</span><!----><!--]--><!----></a><a class="VPLink link link active" href="/vue/keepalive.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>18.怎么缓存当前的组件？缓存后怎么更新？说说你对keep-alive的理解是什么？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/modifier.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>19.Vue常用的修饰符有哪些？有什么应用场景？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/directive.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>20.你有写过自定义指令吗？自定义指令的应用场景有哪些？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/filter.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>21.Vue中的过滤器了解吗？过滤器的应用场景有哪些？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/vnode.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>22.什么是虚拟DOM？如何实现一个虚拟DOM？说说你的思路</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/diff.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>23.你了解vue的diff算法吗？说说看</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/axios.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>24.Vue项目中有封装过axios吗？主要是封装哪方面的？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/axiosCode.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>25.你了解axios的原理吗？有看过它的源码吗？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/ssr.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>26.SSR解决了什么问题？有做过SSR吗？你是怎么做的？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/structure.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>27.说下你的vue项目的目录结构，如果是大型项目你该怎么划分结构和划分组件呢？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/permission.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>28.vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/cors.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>29.Vue项目中你是如何解决跨域的呢？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/404.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>30.vue项目本地开发完成后部署到服务器后报404是什么原因呢？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/vue/error.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>31.你是怎么处理vue项目中的错误的？</span><!----><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-ca9ccb7e data-v-c95df128><div class="VPDoc has-sidebar has-aside" data-v-c95df128 data-v-f0af2311><div class="container" data-v-f0af2311><div class="aside" data-v-f0af2311><div class="aside-curtain" data-v-f0af2311></div><div class="aside-container" data-v-f0af2311><div class="aside-content" data-v-f0af2311><div class="VPDocAside" data-v-f0af2311 data-v-aea49c31><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-aea49c31 data-v-a3de185c><div class="content" data-v-a3de185c><div class="outline-marker" data-v-a3de185c></div><div class="outline-title" data-v-a3de185c>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-a3de185c><span class="visually-hidden" id="doc-outline-aria-label" data-v-a3de185c> Table of Contents for current page </span><ul class="root" data-v-a3de185c><!--[--><li data-v-a3de185c><a class="outline-link" href="#一、keep-alive-是什么" data-v-a3de185c>一、Keep-alive 是什么</a><!----></li><li data-v-a3de185c><a class="outline-link" href="#二、使用场景" data-v-a3de185c>二、使用场景</a><!----></li><li data-v-a3de185c><a class="outline-link" href="#三、原理分析" data-v-a3de185c>三、原理分析</a><!----></li><li data-v-a3de185c><a class="outline-link" href="#四、思考题：缓存后如何获取数据" data-v-a3de185c>四、思考题：缓存后如何获取数据</a><!----></li><li data-v-a3de185c><a class="outline-link" href="#参考文献" data-v-a3de185c>参考文献</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-aea49c31></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-f0af2311><div class="content-container" data-v-f0af2311><!--[--><!--]--><main class="main" data-v-f0af2311><div style="position:relative;" class="vp-doc _vue_keepalive" data-v-f0af2311><div><h1 id="面试官：说说你对keep-alive的理解是什么？" tabindex="-1">面试官：说说你对keep-alive的理解是什么？ <a class="header-anchor" href="#面试官：说说你对keep-alive的理解是什么？" aria-hidden="true">#</a></h1><p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9nSDMxdUY5VklpYlRaSXdpY3ZmUkR3STRiamRBVGlhVEpFZDNzamRoeTd3MDlVM0k5ZERjNUVVSUNFVk1WSVE2aDFYMjVpY1NRT3lraWFwWEpEUFM0VGJST0l3LzY0MA?x-oss-process=image/format,png" alt=""></p><h2 id="一、keep-alive-是什么" tabindex="-1">一、Keep-alive 是什么 <a class="header-anchor" href="#一、keep-alive-是什么" aria-hidden="true">#</a></h2><p><code>keep-alive</code>是<code>vue</code>中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染<code>DOM</code></p><p><code>keep-alive</code> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们</p><p><code>keep-alive</code>可以设置以下<code>props</code>属性：</p><ul><li><p><code>include</code> - 字符串或正则表达式。只有名称匹配的组件会被缓存</p></li><li><p><code>exclude</code> - 字符串或正则表达式。任何名称匹配的组件都不会被缓存</p></li><li><p><code>max</code> - 数字。最多可以缓存多少组件实例</p></li></ul><p>关于<code>keep-alive</code>的基本用法：</p><div class="language-go"><button class="copy"></button><span class="lang">go</span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;">keep</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">alive</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;">component </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">is</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">view</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#A6ACCD;">component</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#A6ACCD;">keep</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">alive</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div><p>使用<code>includes</code>和<code>exclude</code>：</p><div class="language-go"><button class="copy"></button><span class="lang">go</span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;">keep</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">alive include</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">a,b</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;">component </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">is</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">view</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#A6ACCD;">component</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#A6ACCD;">keep</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">alive</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;!--</span><span style="color:#A6ACCD;"> 正则表达式 </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">使用 </span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">v-bind</span><span style="color:#89DDFF;">`</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">--&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;">keep</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">alive </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">include</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">/a|b/</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;">component </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">is</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">view</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#A6ACCD;">component</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#A6ACCD;">keep</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">alive</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;!--</span><span style="color:#A6ACCD;"> 数组 </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">使用 </span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">v-bind</span><span style="color:#89DDFF;">`</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">--&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;">keep</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">alive </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">include</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">[&#39;a&#39;, &#39;b&#39;]</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;">component </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">is</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">view</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#A6ACCD;">component</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#A6ACCD;">keep</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">alive</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div><p>匹配首先检查组件自身的 <code>name</code> 选项，如果 <code>name</code> 选项不可用，则匹配它的局部注册名称 (父组件 <code>components</code> 选项的键值)，匿名组件不能被匹配</p><p>设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（<code>activated</code>与<code>deactivated</code>）：</p><ul><li><p>首次进入组件时：<code>beforeRouteEnter</code> &gt; <code>beforeCreate</code> &gt; <code>created</code>&gt; <code>mounted</code> &gt; <code>activated</code> &gt; ... ... &gt; <code>beforeRouteLeave</code> &gt; <code>deactivated</code></p></li><li><p>再次进入组件时：<code>beforeRouteEnter</code> &gt;<code>activated</code> &gt; ... ... &gt; <code>beforeRouteLeave</code> &gt; <code>deactivated</code></p></li></ul><h2 id="二、使用场景" tabindex="-1">二、使用场景 <a class="header-anchor" href="#二、使用场景" aria-hidden="true">#</a></h2><p>使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用<code>keepalive</code></p><p>举个栗子:</p><p>当我们从<code>首页</code>–&gt;<code>列表页</code>–&gt;<code>商详页</code>–&gt;<code>再返回</code>，这时候列表页应该是需要<code>keep-alive</code></p><p>从<code>首页</code>–&gt;<code>列表页</code>–&gt;<code>商详页</code>–&gt;<code>返回到列表页(需要缓存)</code>–&gt;<code>返回到首页(需要缓存)</code>–&gt;<code>再次进入列表页(不需要缓存)</code>，这时候可以按需来控制页面的<code>keep-alive</code></p><p>在路由中设置<code>keepAlive</code>属性判断是否需要缓存</p><div class="language-go"><button class="copy"></button><span class="lang">go</span><pre><code><span class="line"><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  path</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">list</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">itemList</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// 列表页</span></span>
<span class="line"><span style="color:#A6ACCD;">  component </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">resolve</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#82AAFF;">require</span><span style="color:#89DDFF;">([</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@/pages/item/list</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">],</span><span style="color:#A6ACCD;"> resolve</span><span style="color:#89DDFF;">)</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;"> meta</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  keepAlive</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">true,</span></span>
<span class="line"><span style="color:#A6ACCD;">  title</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">列表页</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><p>使用<code>&lt;keep-alive&gt;</code></p><div class="language-go"><button class="copy"></button><span class="lang">go</span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;">div id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">app</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">wrapper</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;">keep</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">alive</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;!--</span><span style="color:#A6ACCD;"> 需要缓存的视图组件 </span><span style="color:#89DDFF;">--&gt;</span><span style="color:#A6ACCD;"> </span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;">router</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">view v</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">if</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">$route.meta.keepAlive</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#A6ACCD;">router</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">view</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">     </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#A6ACCD;">keep</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">alive</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;!--</span><span style="color:#A6ACCD;"> 不需要缓存的视图组件 </span><span style="color:#89DDFF;">--&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">     </span><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;">router</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">view v</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">if</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">!$route.meta.keepAlive</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#A6ACCD;">router</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">view</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#A6ACCD;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div><h2 id="三、原理分析" tabindex="-1">三、原理分析 <a class="header-anchor" href="#三、原理分析" aria-hidden="true">#</a></h2><p><code>keep-alive</code>是<code>vue</code>中内置的一个组件</p><p>源码位置：src/core/components/keep-alive.js</p><div class="language-go"><button class="copy"></button><span class="lang">go</span><pre><code><span class="line"><span style="color:#A6ACCD;">export </span><span style="color:#89DDFF;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">keep-alive</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  abstract</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">true,</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">  props</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    include</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">[</span><span style="color:#A6ACCD;">String</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> RegExp</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> Array</span><span style="color:#89DDFF;">],</span></span>
<span class="line"><span style="color:#A6ACCD;">    exclude</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">[</span><span style="color:#A6ACCD;">String</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> RegExp</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> Array</span><span style="color:#89DDFF;">],</span></span>
<span class="line"><span style="color:#A6ACCD;">    max</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">[</span><span style="color:#A6ACCD;">String</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> Number</span><span style="color:#89DDFF;">]</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">  created </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    this</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">cache </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">create</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">null</span><span style="color:#89DDFF;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">    this</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">keys </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> []</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">  destroyed </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">for</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(const</span><span style="color:#A6ACCD;"> key in this</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">cache</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#82AAFF;">pruneCacheEntry</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">this</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">cache</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> key</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> this</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">keys</span><span style="color:#89DDFF;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">  mounted </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    this</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">$</span><span style="color:#82AAFF;">watch</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">include</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> val </span><span style="color:#89DDFF;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#82AAFF;">pruneCache</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">this</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> name </span><span style="color:#89DDFF;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">matches</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">val</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> name</span><span style="color:#89DDFF;">))</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">})</span></span>
<span class="line"><span style="color:#A6ACCD;">    this</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">$</span><span style="color:#82AAFF;">watch</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">exclude</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> val </span><span style="color:#89DDFF;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#82AAFF;">pruneCache</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">this</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> name </span><span style="color:#89DDFF;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">!</span><span style="color:#82AAFF;">matches</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">val</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> name</span><span style="color:#89DDFF;">))</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">})</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#82AAFF;">render</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;">/* 获取默认插槽中的第一个组件节点 */</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">const</span><span style="color:#A6ACCD;"> slot </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> this</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">$slots</span><span style="color:#89DDFF;">.</span><span style="color:#89DDFF;">default</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">const</span><span style="color:#A6ACCD;"> vnode </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">getFirstComponentChild</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">slot</span><span style="color:#89DDFF;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;">/* 获取该组件节点的componentOptions */</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">const</span><span style="color:#A6ACCD;"> componentOptions </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> vnode </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#A6ACCD;"> vnode</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">componentOptions</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">if</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">componentOptions</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#676E95;">/* 获取该组件节点的名称，优先获取组件的name字段，如果name不存在则获取组件的tag */</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">const</span><span style="color:#A6ACCD;"> name </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">getComponentName</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">componentOptions</span><span style="color:#89DDFF;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">const</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> include</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> exclude </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> this</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#676E95;">/* 如果name不在inlcude中或者存在于exlude中则表示不缓存，直接返回vnode */</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">if</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">include </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(!</span><span style="color:#A6ACCD;">name </span><span style="color:#89DDFF;">||</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">!</span><span style="color:#82AAFF;">matches</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">include</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> name</span><span style="color:#89DDFF;">)))</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">||</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#676E95;">// excluded</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">exclude </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#A6ACCD;"> name </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">matches</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">exclude</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> name</span><span style="color:#89DDFF;">))</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">return</span><span style="color:#A6ACCD;"> vnode</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">const</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> cache</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> keys </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> this</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#676E95;">/* 获取组件的key值 */</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">const</span><span style="color:#A6ACCD;"> key </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> vnode</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">key </span><span style="color:#89DDFF;">==</span><span style="color:#A6ACCD;"> null</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#676E95;">// same constructor may get registered as different local components</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#676E95;">// so cid alone is not enough (#3269)</span></span>
<span class="line"><span style="color:#A6ACCD;">        ? componentOptions</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">Ctor</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">cid </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">componentOptions</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">tag ? </span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">::${componentOptions.tag}</span><span style="color:#89DDFF;">`</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;&#39;</span><span style="color:#89DDFF;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> vnode</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">key</span></span>
<span class="line"><span style="color:#A6ACCD;">     </span><span style="color:#676E95;">/*  拿到key值后去this.cache对象中去寻找是否有该值，如果有则表示该组件有缓存，即命中缓存 */</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">if</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">cache</span><span style="color:#89DDFF;">[</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">])</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        vnode</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">componentInstance </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> cache</span><span style="color:#89DDFF;">[</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">].</span><span style="color:#A6ACCD;">componentInstance</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#676E95;">// make current key freshest</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#82AAFF;">remove</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">keys</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> key</span><span style="color:#89DDFF;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">        keys</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#676E95;">/* 如果没有命中缓存，则将其设置进缓存 */</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">else</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        cache</span><span style="color:#89DDFF;">[</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">]</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> vnode</span></span>
<span class="line"><span style="color:#A6ACCD;">        keys</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#676E95;">// prune oldest entry</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#676E95;">/* 如果配置了max并且缓存的长度超过了this.max，则从缓存中删除第一个 */</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">if</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">this</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">max </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#A6ACCD;"> keys</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length </span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">parseInt</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">this</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">max</span><span style="color:#89DDFF;">))</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#82AAFF;">pruneCacheEntry</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">cache</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> keys</span><span style="color:#89DDFF;">[</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">],</span><span style="color:#A6ACCD;"> keys</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> this</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">_vnode</span><span style="color:#89DDFF;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">      vnode</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">data</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">keepAlive </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">true</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">return</span><span style="color:#A6ACCD;"> vnode </span><span style="color:#89DDFF;">||</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">slot </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#A6ACCD;"> slot</span><span style="color:#89DDFF;">[</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">])</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><p>可以看到该组件没有<code>template</code>，而是用了<code>render</code>，在组件渲染的时候会自动执行<code>render</code>函数</p><p><code>this.cache</code>是一个对象，用来存储需要缓存的组件，它将以如下形式存储：</p><div class="language-go"><button class="copy"></button><span class="lang">go</span><pre><code><span class="line"><span style="color:#A6ACCD;">this</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">cache </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">key1</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">组件1</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">key2</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">组件2</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;">// ...</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><p>在组件销毁的时候执行<code>pruneCacheEntry</code>函数</p><div class="language-go"><button class="copy"></button><span class="lang">go</span><pre><code><span class="line"><span style="color:#A6ACCD;">function pruneCacheEntry </span><span style="color:#89DDFF;">(</span></span>
<span class="line"><span style="color:#A6ACCD;">  cache</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> VNodeCache</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  key</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">string</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  keys</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> Array</span><span style="color:#89DDFF;">&lt;</span><span style="color:#C792EA;">string</span><span style="color:#89DDFF;">&gt;,</span></span>
<span class="line"><span style="color:#A6ACCD;">  current?</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> VNode</span></span>
<span class="line"><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">const</span><span style="color:#A6ACCD;"> cached </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> cache</span><span style="color:#89DDFF;">[</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">]</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#676E95;">/* 判断当前没有处于被渲染状态的组件，将其销毁*/</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">if</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">cached </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(!</span><span style="color:#A6ACCD;">current </span><span style="color:#89DDFF;">||</span><span style="color:#A6ACCD;"> cached</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">tag </span><span style="color:#89DDFF;">!==</span><span style="color:#A6ACCD;"> current</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">tag</span><span style="color:#89DDFF;">))</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    cached</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">componentInstance</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">$</span><span style="color:#82AAFF;">destroy</span><span style="color:#89DDFF;">()</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">  cache</span><span style="color:#89DDFF;">[</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">]</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> null</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#82AAFF;">remove</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">keys</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> key</span><span style="color:#89DDFF;">)</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><p>在<code>mounted</code>钩子函数中观测 <code>include</code> 和 <code>exclude</code> 的变化，如下：</p><div class="language-go"><button class="copy"></button><span class="lang">go</span><pre><code><span class="line"><span style="color:#A6ACCD;">mounted </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    this</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">$</span><span style="color:#82AAFF;">watch</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">include</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> val </span><span style="color:#89DDFF;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#82AAFF;">pruneCache</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">this</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> name </span><span style="color:#89DDFF;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">matches</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">val</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> name</span><span style="color:#89DDFF;">))</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">})</span></span>
<span class="line"><span style="color:#A6ACCD;">    this</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">$</span><span style="color:#82AAFF;">watch</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">exclude</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> val </span><span style="color:#89DDFF;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#82AAFF;">pruneCache</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">this</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> name </span><span style="color:#89DDFF;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">!</span><span style="color:#82AAFF;">matches</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">val</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> name</span><span style="color:#89DDFF;">))</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">})</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><p>如果<code>include</code> 或<code>exclude</code> 发生了变化，即表示定义需要缓存的组件的规则或者不需要缓存的组件的规则发生了变化，那么就执行<code>pruneCache</code>函数，函数如下：</p><div class="language-go"><button class="copy"></button><span class="lang">go</span><pre><code><span class="line"><span style="color:#A6ACCD;">function pruneCache </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">keepAliveInstance</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> filter</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">const</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> cache</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> keys</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> _vnode </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> keepAliveInstance</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">for</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(const</span><span style="color:#A6ACCD;"> key in cache</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">const</span><span style="color:#A6ACCD;"> cachedNode </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> cache</span><span style="color:#89DDFF;">[</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">]</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">if</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">cachedNode</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">const</span><span style="color:#A6ACCD;"> name </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">getComponentName</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">cachedNode</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">componentOptions</span><span style="color:#89DDFF;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">if</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">name </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">!</span><span style="color:#82AAFF;">filter</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">name</span><span style="color:#89DDFF;">))</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#82AAFF;">pruneCacheEntry</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">cache</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> key</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> keys</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> _vnode</span><span style="color:#89DDFF;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><p>在该函数内对<code>this.cache</code>对象进行遍历，取出每一项的<code>name</code>值，用其与新的缓存规则进行匹配，如果匹配不上，则表示在新的缓存规则下该组件已经不需要被缓存，则调用<code>pruneCacheEntry</code>函数将其从<code>this.cache</code>对象剔除即可</p><p>关于<code>keep-alive</code>的最强大缓存功能是在<code>render</code>函数中实现</p><p>首先获取组件的<code>key</code>值：</p><div class="language-go"><button class="copy"></button><span class="lang">go</span><pre><code><span class="line"><span style="color:#89DDFF;">const</span><span style="color:#A6ACCD;"> key </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> vnode</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">key </span><span style="color:#89DDFF;">==</span><span style="color:#A6ACCD;"> null? </span></span>
<span class="line"><span style="color:#A6ACCD;">componentOptions</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">Ctor</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">cid </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">componentOptions</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">tag ? </span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">::${componentOptions.tag}</span><span style="color:#89DDFF;">`</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;&#39;</span><span style="color:#89DDFF;">)</span></span>
<span class="line"><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> vnode</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">key</span></span>
<span class="line"></span></code></pre></div><p>拿到<code>key</code>值后去<code>this.cache</code>对象中去寻找是否有该值，如果有则表示该组件有缓存，即命中缓存，如下：</p><div class="language-go"><button class="copy"></button><span class="lang">go</span><pre><code><span class="line"><span style="color:#676E95;">/* 如果命中缓存，则直接从缓存中拿 vnode 的组件实例 */</span></span>
<span class="line"><span style="color:#89DDFF;">if</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">cache</span><span style="color:#89DDFF;">[</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">])</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    vnode</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">componentInstance </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> cache</span><span style="color:#89DDFF;">[</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">].</span><span style="color:#A6ACCD;">componentInstance</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;">/* 调整该组件key的顺序，将其从原来的地方删掉并重新放在最后一个 */</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#82AAFF;">remove</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">keys</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> key</span><span style="color:#89DDFF;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">    keys</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">)</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span></span>
<span class="line"></span></code></pre></div><p>直接从缓存中拿 <code>vnode</code> 的组件实例，此时重新调整该组件<code>key</code>的顺序，将其从原来的地方删掉并重新放在<code>this.keys</code>中最后一个</p><p><code>this.cache</code>对象中没有该<code>key</code>值的情况，如下：</p><div class="language-go"><button class="copy"></button><span class="lang">go</span><pre><code><span class="line"><span style="color:#676E95;">/* 如果没有命中缓存，则将其设置进缓存 */</span></span>
<span class="line"><span style="color:#89DDFF;">else</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    cache</span><span style="color:#89DDFF;">[</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">]</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> vnode</span></span>
<span class="line"><span style="color:#A6ACCD;">    keys</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;">/* 如果配置了max并且缓存的长度超过了this.max，则从缓存中删除第一个 */</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">if</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">this</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">max </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#A6ACCD;"> keys</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length </span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">parseInt</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">this</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">max</span><span style="color:#89DDFF;">))</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#82AAFF;">pruneCacheEntry</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">cache</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> keys</span><span style="color:#89DDFF;">[</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">],</span><span style="color:#A6ACCD;"> keys</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> this</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">_vnode</span><span style="color:#89DDFF;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><p>表明该组件还没有被缓存过，则以该组件的<code>key</code>为键，组件<code>vnode</code>为值，将其存入<code>this.cache</code>中，并且把<code>key</code>存入<code>this.keys</code>中</p><p>此时再判断<code>this.keys</code>中缓存组件的数量是否超过了设置的最大缓存数量值<code>this.max</code>，如果超过了，则把第一个缓存组件删掉</p><h2 id="四、思考题：缓存后如何获取数据" tabindex="-1">四、思考题：缓存后如何获取数据 <a class="header-anchor" href="#四、思考题：缓存后如何获取数据" aria-hidden="true">#</a></h2><p>解决方案可以有以下两种：</p><ul><li><p>beforeRouteEnter</p></li><li><p>actived</p></li></ul><h3 id="beforerouteenter" tabindex="-1">beforeRouteEnter <a class="header-anchor" href="#beforerouteenter" aria-hidden="true">#</a></h3><p>每次组件渲染的时候，都会执行<code>beforeRouteEnter</code></p><div class="language-go"><button class="copy"></button><span class="lang">go</span><pre><code><span class="line"><span style="color:#82AAFF;">beforeRouteEnter</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">to</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> from</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> next</span><span style="color:#89DDFF;">){</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#82AAFF;">next</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">vm</span><span style="color:#89DDFF;">=&gt;{</span></span>
<span class="line"><span style="color:#A6ACCD;">        console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">vm</span><span style="color:#89DDFF;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#676E95;">// 每次进入路由执行</span></span>
<span class="line"><span style="color:#A6ACCD;">        vm</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getData</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;">  </span><span style="color:#676E95;">// 获取数据</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">})</span></span>
<span class="line"><span style="color:#89DDFF;">},</span></span>
<span class="line"></span></code></pre></div><h3 id="actived" tabindex="-1">actived <a class="header-anchor" href="#actived" aria-hidden="true">#</a></h3><p>在<code>keep-alive</code>缓存的组件被激活的时候，都会执行<code>actived</code>钩子</p><div class="language-go"><button class="copy"></button><span class="lang">go</span><pre><code><span class="line"><span style="color:#82AAFF;">activated</span><span style="color:#89DDFF;">(){</span></span>
<span class="line"><span style="color:#A6ACCD;">   this</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getData</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// 获取数据</span></span>
<span class="line"><span style="color:#89DDFF;">},</span></span>
<span class="line"></span></code></pre></div><p>注意：服务器端渲染期间<code>avtived</code>不被调用</p><h2 id="参考文献" tabindex="-1">参考文献 <a class="header-anchor" href="#参考文献" aria-hidden="true">#</a></h2><ul><li><a href="https://www.cnblogs.com/dhui/p/13589401.html" target="_blank" rel="noreferrer">https://www.cnblogs.com/dhui/p/13589401.html</a></li><li><a href="https://www.cnblogs.com/wangjiachen666/p/11497200.html" target="_blank" rel="noreferrer">https://www.cnblogs.com/wangjiachen666/p/11497200.html</a></li><li><a href="https://vue3js.cn/docs/zh" target="_blank" rel="noreferrer">https://vue3js.cn/docs/zh</a></li></ul></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-f0af2311 data-v-a54a85bd><div class="edit-info" data-v-a54a85bd><!----><div class="last-updated" data-v-a54a85bd><p class="VPLastUpdated" data-v-a54a85bd data-v-f7d51a9c>Last updated: <time datatime="2022-09-22T09:50:29.000Z" data-v-f7d51a9c></time></p></div></div><div class="prev-next" data-v-a54a85bd><div class="pager" data-v-a54a85bd><a class="pager-link prev" href="/vue/key.html" data-v-a54a85bd><span class="desc" data-v-a54a85bd>Previous page</span><span class="title" data-v-a54a85bd>17.你知道vue中key的原理吗？说说你对它的理解？</span></a></div><div class="has-prev pager" data-v-a54a85bd><a class="pager-link next" href="/vue/modifier.html" data-v-a54a85bd><span class="desc" data-v-a54a85bd>Next page</span><span class="title" data-v-a54a85bd>19.Vue常用的修饰符有哪些？有什么应用场景？</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-ca9ccb7e data-v-9f24cc86><div class="container" data-v-9f24cc86><p class="message" data-v-9f24cc86>Released under the MIT License.</p><p class="copyright" data-v-9f24cc86>Copyright © 2022-present xiumubai</p></div></footer><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"javascript_bom.md\":\"b4feb213\",\"javascript_dom.md\":\"115217f2\",\"javascript_ajax.md\":\"4cd66d00\",\"javascript_array_api.md\":\"fc7e9f5e\",\"javascript_bind_call_apply.md\":\"5037ea1f\",\"javascript_cache.md\":\"3cab1e33\",\"javascript_closure.md\":\"a011a286\",\"javascript_compare.md\":\"8bd00b66\",\"javascript_context_stack.md\":\"eff24dfd\",\"javascript_continue_to_upload.md\":\"8b9f775e\",\"javascript_copy.md\":\"9e6f3d4e\",\"javascript_data_type.md\":\"6773ee7f\",\"javascript_debounce_throttle.md\":\"37f66fe3\",\"javascript_event_model.md\":\"df25b298\",\"javascript_event_agent.md\":\"de86b13f\",\"javascript_event_loop.md\":\"ec105c46\",\"javascript_function_cache.md\":\"722b5929\",\"javascript_functional_programming.md\":\"74c57d2b\",\"javascript_inherit.md\":\"bfe04b52\",\"javascript_js_data_structure.md\":\"3d5793d5\",\"javascript_loss_accuracy.md\":\"4a5e1e83\",\"javascript_memory_leak.md\":\"7f468176\",\"javascript_new.md\":\"a7c10c2f\",\"javascript_prototype.md\":\"ba4aad9c\",\"javascript_pull_up_loading_pull_down_refresh.md\":\"bcd55b26\",\"javascript_regexp.md\":\"5cdd425f\",\"javascript_scope.md\":\"19d93e6d\",\"javascript_security.md\":\"5bc240c7\",\"javascript_single_sign.md\":\"22b66bf9\",\"javascript_string_api.md\":\"4431266e\",\"javascript_tail_recursion.md\":\"d10c1177\",\"javascript_this.md\":\"67dd8f3a\",\"javascript_type_conversion.md\":\"089b68ca\",\"javascript_typeof_instanceof.md\":\"a0ea8297\",\"javascript_visible.md\":\"1b8c1427\",\"nodejs_buffer.md\":\"86b6fada\",\"nodejs_eventemitter.md\":\"4424fd2c\",\"nodejs_stream.md\":\"b2fa0025\",\"nodejs_event_loop.md\":\"03c1b709\",\"nodejs_file_upload.md\":\"37ab2103\",\"nodejs_fs.md\":\"9221e437\",\"nodejs_global.md\":\"a1b3fd28\",\"nodejs_jwt.md\":\"d986798b\",\"nodejs_middleware.md\":\"c2c968c4\",\"nodejs_nodejs.md\":\"6ba067a4\",\"nodejs_paging.md\":\"8b76e487\",\"nodejs_performance.md\":\"fa9c1623\",\"nodejs_process.md\":\"3d717454\",\"nodejs_require_order.md\":\"6e9b880f\",\"react_binding events.md\":\"606997b9\",\"react_building components.md\":\"2460627f\",\"react_fiber.md\":\"e3a3ac5c\",\"react_high order components.md\":\"804cdc8c\",\"react_improve performance.md\":\"2b4cd579\",\"react_jsx to dom.md\":\"7da96f4e\",\"react_react hooks.md\":\"ac1889e4\",\"react_react router model.md\":\"d7e60a7d\",\"react_react router.md\":\"58e50995\",\"react_react refs.md\":\"a90f5a94\",\"react_react.md\":\"6c1f12f1\",\"react_real dom_virtual dom.md\":\"78c68534\",\"react_redux middleware.md\":\"f9c0c1a5\",\"react_syntheticevent.md\":\"937038a1\",\"react_animation.md\":\"51b808f8\",\"react_capture error.md\":\"ab82c7b3\",\"react_class_function component.md\":\"dec93b8e\",\"react_communication.md\":\"63ecc8dd\",\"react_controlled_uncontrolled.md\":\"929967ab\",\"react_diff.md\":\"6758822a\",\"react_how to use redux.md\":\"87b15e2e\",\"react_immutable.md\":\"32f831f3\",\"react_import css.md\":\"6b24701d\",\"react_improve_render.md\":\"0080c4c8\",\"react_key.md\":\"8b76383f\",\"react_life cycle.md\":\"ffcbc76b\",\"react_redux.md\":\"e2fcb8f3\",\"react_render.md\":\"a9b9a91f\",\"react_server side rendering.md\":\"1cbca1f2\",\"react_setstate.md\":\"03ba5fb6\",\"react_state_props.md\":\"b80f455f\",\"react_summary.md\":\"47a9aa61\",\"react_super()_super(props).md\":\"e5fd40c9\",\"algorithm_algorithm.md\":\"6f482d8b\",\"algorithm_binarysearch.md\":\"3a4c14f4\",\"algorithm_heap.md\":\"fe5839ed\",\"algorithm_linked list.md\":\"ec192250\",\"algorithm_bubblesort.md\":\"cf87b40d\",\"algorithm_design1.md\":\"bd491cfe\",\"algorithm_design2.md\":\"941bf6ba\",\"algorithm_graph.md\":\"ddab9801\",\"algorithm_insertionsort.md\":\"7ad6d0c6\",\"algorithm_mergesort.md\":\"d704839d\",\"algorithm_quicksort.md\":\"04e65ce9\",\"algorithm_selectionsort.md\":\"c751f8ed\",\"algorithm_set.md\":\"aa1a236e\",\"algorithm_sort.md\":\"69fbb06f\",\"algorithm_stack_queue.md\":\"09cb42c4\",\"algorithm_structure.md\":\"8ceb1498\",\"algorithm_time_space.md\":\"20afcad9\",\"algorithm_tree.md\":\"8880d846\",\"applet_webview_jscore.md\":\"b5d697c3\",\"applet_applet.md\":\"fd446e94\",\"applet_lifecycle.md\":\"fdf96326\",\"applet_login.md\":\"000d8413\",\"applet_navigate.md\":\"661447e1\",\"applet_optimization.md\":\"4483173a\",\"applet_publish.md\":\"75f5f978\",\"applet_requestpayment.md\":\"96dce311\",\"css_bfc.md\":\"be6458b1\",\"css_animation.md\":\"c69b6036\",\"css_box.md\":\"134dc0e2\",\"css_center.md\":\"671d90b4\",\"css_column_layout.md\":\"17662907\",\"css_css3_features.md\":\"07c233e8\",\"css_css_performance.md\":\"1e723fed\",\"css_dp_px_dpr_ppi.md\":\"baf193db\",\"css_em_px_rem_vh_vw.md\":\"d8841819\",\"css_flexbox.md\":\"60b4d3a2\",\"css_grid.md\":\"fe9da145\",\"css_hide_attributes.md\":\"294742dd\",\"css_layout_painting.md\":\"0b4c79e9\",\"css_less_12px.md\":\"0b872326\",\"css_responsive_layout.md\":\"a92ea8dd\",\"css_sass_less_stylus.md\":\"35f379b9\",\"css_selector.md\":\"17b6992a\",\"css_single_multi_line.md\":\"139fb49a\",\"css_triangle.md\":\"445f3e5e\",\"css_visual_scrolling.md\":\"b22bdee4\",\"demo_index.md\":\"90a5f28c\",\"es6_array.md\":\"b2d9c780\",\"es6_decorator.md\":\"0155aa71\",\"es6_function.md\":\"b2a54be3\",\"es6_generator.md\":\"ab397709\",\"es6_module.md\":\"8074618d\",\"es6_object.md\":\"02960089\",\"es6_promise.md\":\"ba7c72e0\",\"es6_proxy.md\":\"5d343ca0\",\"es6_set_map.md\":\"16366c0a\",\"es6_var_let_const.md\":\"94c5a2e5\",\"git_git.md\":\"81cfa072\",\"git_head_tree_index.md\":\"8da2b48e\",\"git_command.md\":\"d398f681\",\"git_conflict.md\":\"6ace32b7\",\"git_fork_clone_branch.md\":\"60d8b215\",\"git_git_pull_git_fetch.md\":\"7ba61a26\",\"git_git_rebase_git_merge.md\":\"24044b46\",\"git_git_reset_git_revert.md\":\"0573874e\",\"git_git_stash.md\":\"b2108bb4\",\"git_version_control.md\":\"5315b3a1\",\"http_1.0_1.1_2.0.md\":\"f4855f53\",\"http_cdn.md\":\"8db3cb9d\",\"http_dns.md\":\"5bb40fe6\",\"http_get_post.md\":\"54952aa8\",\"http_https.md\":\"42a442c8\",\"http_http_https.md\":\"584d2870\",\"http_osi.md\":\"feab35f0\",\"http_tcp_ip.md\":\"9a3280d8\",\"http_udp_tcp.md\":\"8d5731e8\",\"http_websocket.md\":\"b78e9a8f\",\"http_after_url.md\":\"ed13fb23\",\"http_handshakes_waves.md\":\"7f21a38c\",\"http_headers.md\":\"77af020f\",\"http_status.md\":\"731daad7\",\"index.md\":\"b249642b\",\"typescript_class.md\":\"3bc756f0\",\"typescript_data_type.md\":\"8b852fca\",\"typescript_decorator.md\":\"09934301\",\"typescript_enum.md\":\"f05a48e4\",\"typescript_function.md\":\"aa1f6c95\",\"typescript_generic.md\":\"066edb51\",\"typescript_high type.md\":\"bdf59b40\",\"typescript_interface.md\":\"3ebee750\",\"typescript_namespace_module.md\":\"2af77e9c\",\"typescript_react.md\":\"6ca91139\",\"typescript_typescript_javascript.md\":\"e89507d8\",\"typescript_vue.md\":\"a39dd1b5\",\"vue_404.md\":\"1b714ff3\",\"vue_axios.md\":\"a1e96e5f\",\"vue_axioscode.md\":\"fccd1ad0\",\"vue_bind.md\":\"4c20085d\",\"vue_communication.md\":\"3f059e41\",\"vue_components_plugin.md\":\"2b4f21b2\",\"vue_cors.md\":\"6aede5b3\",\"vue_data.md\":\"18d617df\",\"vue_data_object_add_attrs.md\":\"94cf2218\",\"vue_diff.md\":\"37e2c3ee\",\"vue_directive.md\":\"9b5aed0e\",\"vue_error.md\":\"347dc9f7\",\"vue_filter.md\":\"ff72d81c\",\"vue_first_page_time.md\":\"1cf8d795\",\"vue_if_for.md\":\"28139518\",\"vue_keepalive.md\":\"b8401dc5\",\"vue_key.md\":\"05160f3e\",\"vue_lifecycle.md\":\"21135238\",\"vue_mixin.md\":\"ed53004e\",\"vue_modifier.md\":\"f82a3264\",\"vue_new_vue.md\":\"0244ca48\",\"vue_nexttick.md\":\"dd0380b1\",\"vue_observable.md\":\"edc5c364\",\"vue_permission.md\":\"90cc7a15\",\"vue_show_if.md\":\"706a56de\",\"vue_slot.md\":\"820aa4ac\",\"vue_spa.md\":\"75e55e32\",\"vue_ssr.md\":\"3f6ba2de\",\"vue_structure.md\":\"170a36be\",\"vue_vnode.md\":\"a1edc5ce\",\"vue_vue.md\":\"07289420\",\"vue3_composition.md\":\"4ca97a72\",\"vue3_goal.md\":\"7224e393\",\"vue3_modal_component.md\":\"7245015a\",\"vue3_performance.md\":\"535b5faa\",\"vue3_proxy.md\":\"17acfa40\",\"vue3_treeshaking.md\":\"8732cc75\",\"webpack_hmr.md\":\"2bf5fb55\",\"webpack_loader.md\":\"5a6680be\",\"webpack_loader_plugin.md\":\"01307ebe\",\"webpack_plugin.md\":\"fb205e68\",\"webpack_rollup_parcel_snowpack_vite.md\":\"2ce2d9e1\",\"webpack_build_process.md\":\"fbd4e2e7\",\"webpack_improve_build.md\":\"496f4f12\",\"webpack_performance.md\":\"ebeffcd8\",\"webpack_proxy.md\":\"3619d807\",\"webpack_webpack.md\":\"0fddbfa8\"}")</script>
    <script type="module" async src="/assets/app.1cdb2ec5.js"></script>
    
  </body>
</html>